<template>
  <div>
    <DynamicTable
      ref="dynamicTableRef"
      row-key="id"
      :header-title="$t('routes.system.system.config.voice')"
      :data-request="loadData"
      :columns="columns"
      bordered
      size="small"
      :showIndex="false"
      :pagination="false"
    >
    </DynamicTable>
  </div>
</template>
<script lang="tsx" setup>
  import { ref } from 'vue'
  import { message } from 'ant-design-vue'
  import { DynamicTable } from '@/components/core/dynamic-table'
  import type { TableColumn } from '@/components/core/dynamic-table'
  import { useI18n } from '@/hooks/useI18n'
  import { ApiDescription, HttpMethod } from '@/utils/apiDescription'
  import canAccessView from '@/utils/accessCheck'
  import { getMsgTemp, setMsgTemp } from '@/api/middleSystem'
  import { useFormModal } from '@/hooks/useModal/useFormModal'
  import type { FormSchema } from '@/components/core/schema-form/src/types/form'

  defineOptions({
    name: 'Voice',
  })

  const canUpdate = ref(canAccessView(new ApiDescription('/message/template', HttpMethod.Post)))

  const { t } = useI18n()
  const dynamicTableRef = ref<InstanceType<typeof DynamicTable>>()

  /**
   * 表格列
   */
  const columns: TableColumn<any>[] = [
    {
      title: '消息模版描述',
      dataIndex: 'left',
      hideInSearch: true,
      children: [
        {
          title: '消息标识符',
          dataIndex: 'Id',
          align: 'center',
        },
        {
          title: '消息名称',
          dataIndex: 'Name',
          align: 'center',
        },
        {
          title: '消息种类',
          dataIndex: 'Type',
          align: 'center',
        },
        {
          title: '消息字段',
          dataIndex: 'Parameters',
          align: 'center',
          customRender: ({ record }) => {
            return JSON.stringify(record.Parameters)
          },
        },
      ],
    },
    {
      title: '消息模版',
      dataIndex: 'right',
      hideInSearch: true,
      children: [
        {
          title: '消息标识符',
          dataIndex: 'Id',
          align: 'center',
        },
        {
          title: '消息模板',
          dataIndex: 'Template',
          align: 'center',
        },
        {
          title: '默认消息签名',
          dataIndex: 'DefaultSign',
          align: 'center',
        },
      ],
    },
    {
      title: '操作',
      dataIndex: 'ACTION',
      hideInSearch: true,
      actions: ({ record }) => [
        {
          label: '设置',
          hide: !canUpdate.value,
          onClick: () => set(record),
        },
      ],
    },
  ]

  /**
   * 加载数据
   */
  const loadData = async () => {
    let data
    await getMsgTemp(1).then((res: any) => {
      data = JSON.parse(JSON.stringify(res)).map((item: any) => {
        const obj = {}
        return Object.assign(obj, item.Descriptor, item.Template)
      })
    })
    return data
  }

  const [showModal] = useFormModal()
  const formSchemas: FormSchema[] = [
    {
      field: 'Template',
      component: 'Input',
      label: '消息模板',
      rules: [{ required: true }],
    },
    {
      field: 'DefaultSign',
      component: 'Input',
      label: '消息签名',
      rules: [{ required: true }],
    },
  ]

  /**
   * 设置
   */
  const set = async record => {
    const [formRef] = await showModal({
      modalProps: {
        title: t('common.edit'),
        width: '40%',
        onFinish: async values => {
          let { Template, DefaultSign } = values
          await setMsgTemp(record.Id, Template, DefaultSign)
          message.success('操作成功')
          dynamicTableRef.value?.reload()
        },
      },
      formProps: {
        labelWidth: 100,
        layout: 'horizontal',
        schemas: formSchemas,
      },
    })

    formRef?.setFieldsValue({
      Template: record.Template,
      DefaultSign: record.DefaultSign,
    })
  }
</script>
